<h2>Ui Settings</h2>
<form nz-form nzLayout="horizontal">
  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="12" [nzMd]="8" [nzLg]="6" nzFor="theme"
      >Theme</nz-form-label
    >
    <nz-select
      [(ngModel)]="os.themeId"
      (ngModelChange)="ms.setTheme()"
      class="theme-sel"
      name="theme"
    >
      <nz-option
        *ngFor="let theme of themes; trackBy: getThemeId"
        [nzValue]="theme.css"
        [nzLabel]="theme.name"
      ></nz-option>
    </nz-select>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="12" [nzMd]="8" [nzLg]="6" nzFor="format">
      Number format (reload required)
    </nz-form-label>
    <nz-select
      [(ngModel)]="os.numFormat"
      (ngModelChange)="onFormatChange()"
      class="theme-sel"
      name="format"
    >
      <nz-option nzValue="standard" nzLabel="Standard"></nz-option>
      <nz-option nzValue="scientific" nzLabel="Scientific"></nz-option>
      <nz-option nzValue="engineering" nzLabel="Engineering"></nz-option>
      <nz-option nzValue="longScale" nzLabel="Long Scale"></nz-option>
    </nz-select>
  </nz-form-item>
</form>
<form nz-form nzLayout="horizontal" class="switch-form">
  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="side">
      Side menu theme
    </nz-form-label>
    <nz-switch
      name="side"
      [(ngModel)]="os.darkSide"
      (ngModelChange)="ms.setSideTheme()"
    ></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="usa">
      USA decimal format (reload required)
    </nz-form-label>
    <nz-switch
      name="usa"
      [(ngModel)]="usaFormat"
      (ngModelChange)="changeUsaFormat()"
    ></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="small">
      Small Headers
    </nz-form-label>
    <nz-switch name="small" [(ngModel)]="os.compactCardHeader"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="pn">
      "Production stopped" modal
    </nz-form-label>
    <nz-switch name="pn" [(ngModel)]="os.prodStopNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="ci">
      Show components info
    </nz-form-label>
    <nz-switch name="ci" [(ngModel)]="os.showComponentsInfo"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="dd">
      Show drones status
    </nz-form-label>
    <nz-switch name="dd" [(ngModel)]="os.showDronesStatus"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="listUi">
      List ui for workers
    </nz-form-label>
    <nz-switch name="listUi" [(ngModel)]="os.listUi"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="showDesc"
    >
      Show descriptions
    </nz-form-label>
    <nz-switch name="showDesc" [(ngModel)]="os.showDescriptions"></nz-switch>
  </nz-form-item>

  <h2>Notifications</h2>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="sp">
      Space station completed notifications
    </nz-form-label>
    <nz-switch name="sp" [(ngModel)]="os.spaceStationNotifications"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="bw">
      Battle Win notification
    </nz-form-label>
    <nz-switch name="bw" [(ngModel)]="os.battleWinNotification"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="bl">
      Battle Lost notification
    </nz-form-label>
    <nz-switch name="bl" [(ngModel)]="os.battleLostNotification"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="w1">
      All warp notifications
    </nz-form-label>
    <nz-switch name="w1" [(ngModel)]="os.allWarpNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="w2">
      Small(10 sec) warp notifications
    </nz-form-label>
    <nz-switch name="w2" [(ngModel)]="os.smallWarpNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="experience"
    >
      Experience notifications
    </nz-form-label>
    <nz-switch name="experience" [(ngModel)]="os.expNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="defeat">
      Enemy defeat notifications
    </nz-form-label>
    <nz-switch name="defeat" [(ngModel)]="os.enemyDefeatNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="research"
    >
      Research notifications
    </nz-form-label>
    <nz-switch name="research" [(ngModel)]="os.researchNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="research-boost"
    >
      Research boost notifications
    </nz-form-label>
    <nz-switch
      name="research-boost"
      [(ngModel)]="os.researchBoostNoti"
    ></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="challenge"
    >
      Challenge notifications
    </nz-form-label>
    <nz-switch name="challenge" [(ngModel)]="os.challengeNoti"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label
      [nzXs]="24"
      [nzSm]="16"
      [nzMd]="8"
      [nzLg]="6"
      nzFor="achievements"
    >
      Achievements notifications
    </nz-form-label>
    <nz-switch
      name="achievements"
      [(ngModel)]="os.achievementsNoti"
    ></nz-switch>
  </nz-form-item>

  <h2>Tutorial info</h2>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="t2">
      Operativity info
    </nz-form-label>
    <nz-switch name="t2" [(ngModel)]="os.operativityInfo"></nz-switch>
  </nz-form-item>

  <nz-form-item>
    <nz-form-label [nzXs]="24" [nzSm]="16" [nzMd]="8" [nzLg]="6" nzFor="t1">
      Show districts info
    </nz-form-label>
    <nz-switch name="t1" [(ngModel)]="os.districtInfo"></nz-switch>
  </nz-form-item>
</form>
